import React, { useEffect, useRef, useState } from 'react'
import { Tabs, Swiper } from 'antd-mobile'
// import styles from './demo3.less'
import { SwiperRef } from 'antd-mobile/es/components/swiper'
import './Home.css'
import { useNavigate } from 'react-router-dom'
import { getHome } from '../../api'
import Tabbars from '../../Tabbar/Tabbars'
import { MessageFill } from 'antd-mobile-icons'
function Home() {
  const navigate = useNavigate()
  if (!localStorage.getItem('token')) {
    navigate('/')
  }

  const tabItems = [
    { key: 'fruits', title: '全部' },
    { key: 'vegetables', title: '音乐会' },
    { key: 'animals', title: '研讨会' },
  ]
  const swiperRef = useRef<SwiperRef>(null)
  const [activeIndex, setActiveIndex] = useState(1)
  const [homelists, setHomelists] = useState<any[]>([])
  useEffect(() => {
    getHome().then((res: any) => {
      console.log(res)
      setHomelists(res.data.data)

    })
  }, [])
  console.log(homelists, '123')
  const click = () => {
    navigate('/lists')
  }
  return (
    <div>
      <h2>北京市</h2>
      <div className='icon'>
        <MessageFill />
      </div>
      <br />
      <div>
        <div onClick={click}>更多</div>
        <Tabs
          activeKey={tabItems[activeIndex].key}
          onChange={key => {
            const index = tabItems.findIndex(item => item.key === key)
            setActiveIndex(index)
            swiperRef.current?.swipeTo(index)
          }}
        >
          {tabItems.map(item => (
            <Tabs.Tab title={item.title} key={item.key} />
          ))}
        </Tabs>
        <Swiper
          direction='horizontal'
          loop
          indicator={() => null}
          ref={swiperRef}
          defaultIndex={activeIndex}
          onIndexChange={index => {
            setActiveIndex(index)
          }}
        >
          <Swiper.Item>
            <div className="content">
              {
                homelists.map((item: any) => {
                  return <div key={item.id} className='home-list'>
                    <div>
                      <img src={item.imgPath} alt="" />
                    </div>
                    <div>
                      <div><h3>{item.showName}</h3></div>
                      <div>{item.showDetail}</div>
                    </div>
                  </div>
                })
              }
            </div>
          </Swiper.Item>
          <Swiper.Item>
            <div className="content">音乐会</div>
          </Swiper.Item>
          <Swiper.Item>
            <div className="content">研讨会</div>
          </Swiper.Item>
        </Swiper>
      </div>

      <Tabbars />
    </div>
  )
}

export default Home
